<template>
    <div class="contain">
        <div class="header">
            <el-button type="primary" @click="addCard()">添加组别</el-button>
            <span class="export-span">
                <form :action="url" method="get" >
                     <button class="export" type="submit">批量导出</button>
                     <input type="hidden" name="ids" :value="multipleSelection" />
                     <input type="hidden" name="sessionId" :value="sessionId" />
                </form>
            </span>
        </div>
        <div class="input_modal">         
            <div class="input-item">
                <span>请输入组别名称：</span>
                <el-input v-model="groupName" placeholder="请输入关键字" class="proName"  @keyup.enter.native="search"></el-input>  
            </div>
            <div class="input-item">
                <el-button type="primary" @click="getinformList">查询</el-button>
            </div>
            
        </div>
        <div class="table-content">
            <el-table  v-loading="loading" :data="informList"  style="width: 100%;text-align:center"   :border='true' >
                <el-table-column  prop="groupName"    label="组别名称"></el-table-column>
                <el-table-column  label="成员" >
                    <template slot-scope="scope">
                       {{returnName(scope.row.staffList)}}
                    </template> 
                  </el-table-column>
                <el-table-column  prop="id"  label="操作" fixed="right" width='300px'>
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="addCard(scope.row.id,scope.row.groupName)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="deleteItem(scope.row.id)">删除</el-button>
                        <!-- <span v-if="tableData[scope.$index].status == 'VERIFIED'">已核实</span> -->
                    </template> 
                  </el-table-column>
            </el-table>
        </div>
        <el-dialog
            title="新增/编辑组别"
            :visible.sync="dialogVisible"
            width="30%"
            >
            <div class="dialog-content">
                <el-form :model="information" :rules="rules" ref="information" label-width="120px" class="">
                    <el-form-item label="组别名称：" prop="groupName">
                        <el-input v-model="information.groupName" placeholder="请输入分类名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('information')" >确 定</el-button>
                        <el-button @click="cancelBtn" type="primary">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <div class="pagination">
            <el-pagination   @size-change="handleSizeChange"  @current-change="handleCurrentChange"       
                :current-page.sync="pageIndex"              
                :page-size="pageSize"   
                :page-sizes='[10,20,50,100]'    
                layout="sizes, prev, pager, next"       
                :total="pageCount">     
            </el-pagination>
        </div>
        
    </div>
</template>
<script>
    let CONSTANT = require("../../constant/constant.js");
    let common = require("../../common.js");
    export default{
        data(){
            return {
                pageCount:null,
                pageIndex:1,
                pageSize:10,
                informList:[],
                allThemeList:[],
                themeList:[],
                groupName:'',
                loading: true,
                dialogVisible:false,
                information:{
                    groupName:'',
                    id:''
                },  
                rules: {
                    groupName: [
                        { required: true, message: '请输入组别名称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                },
                multipleSelection:[],
                url:'',
                sessionId:''
            }
        },
        mounted() {
            this.getinformList();   //分页获取资讯列表
            this.sessionId = sessionStorage.getItem('sessionId');
            this.url = CONSTANT.URL.GROUP.EXCELGROUP;
        },
        methods: {
            check:function(){
                this.$message({
                    type: 'warning',
                    message: '请先选择'
                });
            },
            selectTable(val) {
                this.ids = []
                this.multipleSelection = []
                val.map( item => {
                    this.ids.push(item.id)
                    this.multipleSelection.push(item.id)
                })
            },
            returnName(arr){
                let str,arr1 = [];
                if(arr&&arr.length){
                    arr.map((item)=>{
                        arr1.push(item.staffName)
                    })
                    str = arr1.join(',')
                }else{
                    str = '--'
                }
                return str;
            },
            getinformList(){
                 this.loading = true;
                let url = CONSTANT.URL.GROUP.FINDGROUPBYPAGE;
                let data = {
                    pageIndex:this.pageIndex,
                    pageSize:this.pageSize,
                    groupName:this.groupName?this.groupName:null
                };
                common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                    this.loading = false;
                    let data = res.data.bussData;
                    this.informList = data;
                    this.pageCount = res.data.count
                }) 
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    let url = CONSTANT.URL.GROUP.SAVE;
                    let param = JSON.stringify(this.information);
                    common.requestAjax(url, param, null, res => {
                        if(res.status == 200) {
                            this.$message({
                                type: 'success',
                                message: '保存成功!'
                            });
                             this.getinformList();  
                            this.dialogVisible = false; 
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            //删除
            deleteItem(id){
                this.$confirm('确定删除?', '提示', {           
                    confirmButtonText: '确定',           
                    cancelButtonText: '取消',           
                    type: 'warning'         
                }).then(() => {           
                    let  url = CONSTANT.URL.GROUP.DELETE;
                    let data = {id:id} ;
                    common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                        if(res.status == 200){
                            this.$message({
                                type:'success',
                                message:'删除成功!'
                            });
                            this.getinformList();
                        }
                        else{
                            this.$message({
                                type:'warning',
                                message:res.msg
                            })
                        }
                    })      
                    }).catch(() => {           
                        this.$message({             
                        type: 'info',             
                        message: '已取消删除'           
                    });                   
                });
            },
            //新增编辑
            addCard(id,name){
                this.dialogVisible = true;
                if(id){
                    this.information.id = id;
                    this.information.groupName = name
                }else{
                    this.information.id = ''
                    this.information.groupName = ''
                }
                
            },
            cancelBtn(){
                this.dialogVisible = false
            },
            handleSizeChange(val) {
                this.pageSize= val;
                this.getinformList();
            },
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.getinformList();
            },
            handleSelectionChange(val) { 
            
            },
        },
    }
</script>

<style lang="scss">
.contain {
  .el-dialog__body{ padding-left: 0;padding-top: 30px;border-top:1px solid #dedede;}
  .dialog-con{
      background-color: #f5f5f5;
      display: flex;
      justify-content: space-between;
      ul{ 
          width:28%;list-style: none;padding:0;font-size:14px;float: left;margin-top:0;z-index:999;
          li{ list-style: none;height:60px;line-height:60px;text-align: center;display: block;}
          li.active{color:#21b5cc;background-color: #fff;font-size:16px;border-right:2px solid #21b5cc;}
        //   li:hover{font-size:16px; }
      }
      .tab-content{ width: 70%;display: inline-block;padding-left:10%;background-color: #fff;min-height:300px;
        .sort{
            .sort_name{ font-weight: 600;margin-bottom: 5px;}
            .group-list{ padding-left: 20px;
                .el-radio{display:block;margin-left: 0;margin-bottom: 3px;}
            }
        }
      }
      .el-button--default{background-color: #fff !important;}
  }
}
</style>